<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数字步进组件</title>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="ok-body">
            <blockquote class="layui-elem-quote" style="padding: 5px;">
                1.layui第三方扩展组件：<font color="red" size="2">数字步进(countUp)</font>；
                <br/>
                2.本项目主要用于首页控制台数据指标动态变化到设置的值；
            </blockquote>
            <button type="button" class="layui-btn layui-bg-blue" id="countUp">动起来</button>

            <pre>
            // Step1. 引入依赖
            let countUp = layui.countUp;
			<br/>

            // Step2. 使用
            let count_up = new countUp({
                target: $('#countUp1'), // 绑定元素
                startVal: 5, // 目标开始的值，默认值为0
                endVal: 1000, // 到达目标值,默认值为元素的值
                decimals: 2, // 小数位数，默认值为0
                duration: 5, // 动画持续时间为秒，默认值为2
            });
            <br/>

            // Step3. 启动
            count_up.start();
		    </pre>

            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card b1">
                        <div class="layui-card-header">最简单的例子</div>
                        <div class="layui-card-body">
                            <div id="countUp1" style="font-size: 24px;font-weight: bold"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card b1">
                        <div class="layui-card-header">指定延时动画</div>
                        <div class="layui-card-body">
                            <div id="countUp2" style="font-size: 24px;font-weight: bold"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card b1">
                        <div class="layui-card-header">指定小数位数</div>
                        <div class="layui-card-body">
                            <div id="countUp3" style="font-size: 24px;font-weight: bold"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card b1">
                        <div class="layui-card-header">随机数字</div>
                        <div class="layui-card-body">
                            <div id="countUp4" style="font-size: 24px;font-weight: bold"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--  引入layui框架js文件-->
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["code", "countUp"], function () {
        let code = layui.code;
        let countUp = layui.countUp;
        let $ = layui.jquery;

        code({
            elem: "pre",
            title: "代码示例",
            skin:'notepad', //设置显示风格
            about: false
        });

        $("#countUp").click(function () {
            new countUp({
                target: $('#countUp1'), // 绑定元素
                endVal: 1000,
            }).start();
            new countUp({
                target: $('#countUp2'),
                duration: 5,//动画的持续时间为5秒默认为2秒
                endVal: 2000,
            }).start();
            new countUp({
                target: $('#countUp3'),
                decimals: 2,//小数位数
                endVal: 3000,
            }).start();
            new countUp({
                target: $('#countUp4'),
                duration: 8,
                decimals: 2,
                endVal: (Math.random() * 1900 + 100),
            }).start();
        });
    });
</script>
</body>
</html>
